import React from "react";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/icons-material/Close";
import Login from "./Login";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import Avatar from "@mui/material/Avatar";
import { useSnapshot } from "valtio";
import { appState } from "@content/state/appState";

interface Props {
  visible: boolean;
  onClose: () => void;
}

export default function SidePanel(props: Props) {
  const snap = useSnapshot(appState);
  return (
    <Box
      id="wxt-extension-panel"
      sx={{
        position: "fixed",
        top: 70,
        right: 20,
        zIndex: 10001,
        transform: props.visible ? "translateX(0)" : "translateX(100%)",
        opacity: props.visible ? 1 : 0,
        transition: "all .3s cubic-bezier(0.4,0,0.2,1)",
      }}
    >
      <Paper elevation={8} sx={{ width: 350, maxHeight: 500, borderRadius: 2, overflow: "hidden" }}>
        <Box
          sx={{
            px: 2.5,
            py: 2,
            borderBottom: "1px solid",
            borderColor: "divider",
            background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
            color: "white",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Typography variant="subtitle1" fontWeight={600} sx={{ m: 0 }}>
            🔧 扩展工具
          </Typography>
          <IconButton size="small" onClick={props.onClose} sx={{ color: "white" }}>
            <CloseIcon fontSize="small" />
          </IconButton>
        </Box>
        <Box sx={{ p: 2.5 }}>
          {snap.token ? (
            <Stack spacing={2}>
              <Stack direction="row" spacing={2} alignItems="center">
                <Avatar sx={{ bgcolor: "primary.main" }}>{(snap.profile?.email?.[0] || "U").toUpperCase()}</Avatar>
                <Box>
                  <Typography variant="subtitle1" fontWeight={600}>
                    已登录
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {snap.profile?.email || "用户"}
                  </Typography>
                </Box>
              </Stack>
              <Button
                variant="contained"
                color="error"
                onClick={() => {
                  appState.token = undefined;
                  appState.profile = undefined;
                }}
              >
                退出登录
              </Button>
            </Stack>
          ) : (
            <Login />
          )}
        </Box>
      </Paper>
    </Box>
  );
}


